<template>
	<!-- 设置-门店展示-添加线下门店表单 -->
	<div>
		<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 8 }" @submit="handleSubmit">
			<a-form-item  style='display: none;'>
		      <a-input
		        v-decorator="['code',formset.code ]"
		      />
		    </a-form-item>
		    <a-form-item label="线下店名">
		      <a-input
		        v-decorator="['shopName',formset.shopName ]"
		      />
		    </a-form-item>
		    
		    <a-form-item label="地理坐标(经度)">
		       <a-input  style='width: 120px;'
		        v-decorator="['longitude', formset.longitude ]"
		      />
		      <a href='http://lbs.qq.com/tool/getpoint/' class='pl10' target='_blank'><sub>点击查询地理坐标</sub></a>
		    </a-form-item> 
		    <a-form-item label="地理坐标(纬度)">
		       <a-input  style='width: 120px;'
		        v-decorator="['latitude', formset.latitude ]"
		      />
		    </a-form-item> 
		    <a-form-item label="地址">
		      <a-input
		        v-decorator="['address', formset.address ]"
		      />
		    </a-form-item> 
		    <a-form-item label="门店电话">
		      <a-input
		        v-decorator="['phone', formset.phone ]"
		      />
		    </a-form-item>
		    <a-form-item label="是否设置为旗舰店">
		      <a-switch checked   @change="onChange" />
		    </a-form-item>
		    <a-form-item label="营业时间">
		      <a-button @click='addTime'>添加</a-button> 
		      <a-table class='mt28'  :columns="columns" :data-source="businessHour" :row-key="record => record.code"> 
		      	<span slot='dayOfWeek' slot-scope='text'>
		      		{{text | weekZh}}
		      	</span>
		      	<span slot='action' slot-scope='text,record,index'>
		      		<a href="javascript:;"  @click='editTime(record,index)' class='color-blue '>编辑</a> 
					<a-divider type="vertical" /> 
					<a href="javascript:;"  class='color-red' @click='delTime(index)'>删除</a> 
		      	</span>
		      </a-table>

		    </a-form-item>                                                            
		    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
		      <router-link  to='/usercentersetting'><a-button  class='mr20'> 取消 </a-button></router-link>
		      <a-button type="primary" html-type="submit"> 提交 </a-button>
		    </a-form-item>
		</a-form>  
 		<!-- 选择时间组件 -->
 		<chooseTimeModal  ref='chooseTimeModal' :visible='showChooseTime'   v-on:handleCancel='showChooseTime=false'  v-on:handleOk='(d)=>choose_finished(d) ' v-on:handleEditok='choose_edited(arguments)'></chooseTimeModal> 
 
	</div>
</template>

<script >
	/*营业时间table*/
	const columns = [
		{
		  	title:'周几', 
		  	dataIndex:'dayOfWeek',
		  	key:'dayOfWeek',
		  	scopedSlots: { customRender: 'dayOfWeek' }
		},
		{
		  	title:'开始时间', 
		  	dataIndex:'startTime',
		  	key:'startTime'
		},
		{
		  	title:'结束时间', 
		  	dataIndex:'endTime',
		  	key:'endTime'
		},
		{
			title:'操作',
			scopedSlots:{ customRender:'action' },
		} 
	]
	
	import chooseTimeModal from '@/components/minipro/HomeSetting/chooseTime' 
	import  { submit_offlineShop,get_offlineShop }  from  '@/api/minipro/userCenter'
	export default{
		name:'userAddShop',
		data(){
			return {
				isEdit:false,
				columns,
				form: this.$form.createForm(this),
				businessHour:[],//营业时间  
				formset:{
					code:{ initialValue:''},
					shopName:{ rules: [{ required: true, message: 'Please input your note!' }] ,initialValue:''},
					address:{ rules: [{ required: true, message: 'Please input your note!' }] ,initialValue:''},
					phone:{ rules: [{ required: true, message: 'Please input your note!' }] ,initialValue:''},
					longitude:{ rules: [{ required: true, message: 'Please input your note!' }],initialValue:'' },
					latitude:{ rules: [{ required: true, message: 'Please input your note!' }],initialValue:'' },
					flagship:{initialValue:''}
				},
				showChooseTime:false, 
				 
			} 
		},
		created(){
			if(!!this.$route.query.code){
				this.isEdit = true
				this.pageInit(this.$route.query.code)
			} 
		},
		methods:{ 
			pageInit(code){
				get_offlineShop(code).then((res)=>{
					let data = res.data.data
					this.formset.code.initialValue = data.code
					this.formset.shopName.initialValue = data.shopName
					this.formset.address.initialValue = data.address
					this.formset.phone.initialValue = data.phone
					this.formset.longitude.initialValue = data.longitude
					this.formset.latitude.initialValue = data.latitude
					this.businessHour = data.businessHoursList

				})
			},
			handleSubmit(e){
				let that = this,
					url;
				e.preventDefault(); 
		      	this.form.validateFields((err, values) => {
		        	if (!err) {
		               console.log('Received values of form: ', values);

		               values.businessHoursList = this.businessHour   
		                if(that.isEdit == false){
			                url ='/sys/offline_shop/create_offline_shop' //新增 线下旗舰店
			            }
			            else{
			                 
			                url = '/sys/offline_shop/modify_offline_shop' //修改 线下旗舰店
			            }
			            submit_offlineShop(url,values).then((res)=>{ 
			                if(res.data.flag == true){
			                    that.$message.success(res.data.msg) 
			                    this.$router.push('/usercentersetting')
			                }  
			            })
			            .catch((err)=>{
			                console.log(err) 
			            })
			          }
			        else{
			              console.log(err) 
		        	} 
		      	});
			},

			/*
				添加营业时间（周几，开始时间，结束时间）
			*/
			addTime(){
				this.showChooseTime = true 
				this.$refs.chooseTimeModal.$emit('openDialog') 
			},
			/*
				选择时间子组件选择完成，发送事件给父组件
			*/
			choose_finished(e){
				this.showChooseTime = false  
				let flag = this.checkRepeat(e.dayOfWeek) 
				if(flag){
					this.businessHour.unshift({
						dayOfWeek: e.dayOfWeek,
						startTime: e.hourAM + ':' + e.hourAMMin + ':00',
						endTime: e.hourPM + ':' + e.hourPMMin + ':00' 
					})
				} 
			},
			/*
			前台删除效果，并不是真的删除
			*/
			delTime(index){ 
				this.businessHour.splice(index,1)
			},
			/*
				编辑营业时间
			*/
			editTime(record,index){
				this.showChooseTime = true 
				this.$refs.chooseTimeModal.$emit('editDialog',record,index)
			},
			/*
				编辑时间子组件选择完成，发送事件给父组件
			*/
			choose_edited(arg){
				this.showChooseTime = false 
				let data = arg[0]
				let index = arg[1]
				let arrItem = {
					dayOfWeek: data.dayOfWeek,
					startTime: data.hourAM + ':' + data.hourAMMin + ':00',
					endTime: data.hourPM + ':' + data.hourPMMin + ':00'
				}
				this.businessHour.splice(index,1,arrItem)
				
			},
			/*
				检查星期数是否重复
			*/
			checkRepeat(day){
				let flag = true
				for(let i=0;i<this.businessHour.length;i++){
					if(this.businessHour[i].dayOfWeek == day){
						this.$info({
					        title: '提示',
					        content:'存在重复添加星期',
					        onOk() {},
					    });
					    flag = false
						break; 
					}
				}
				return flag
			},
			/*当前店是否设置为旗舰店*/
			onChange(checked) {
		      console.log(`a-switch to ${checked}`);
		    },
			 
		},
		components:{
			chooseTimeModal
		} 	
	} 
	
</script>